<template>
  <el-container style="height: 100vh;">
    <el-header style="background-color: #409EFF; color: white; display: flex; justify-content: space-between; align-items: center; padding: 10px;">
      <div style="display: flex; align-items: center;">
        <el-icon class="menu-fold-icon" @click="isCollapse = !isCollapse">
          <Fold v-if="!isCollapse"/>
          <Expand v-else/>
        </el-icon>
        <h2 style="margin: 0 0 0 10px; font-size: 20px;">金融信贷管理系统</h2>
      </div>
      <div style="display: flex; align-items: center;">
        <el-dropdown trigger="hover">
          <div style="display: flex; align-items: center; cursor: pointer;">
            <el-avatar :size="40" :src="userInfo.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" style="margin-right: 8px;"></el-avatar>
            <span style="color: #fff; margin-right: 4px;">{{ userInfo.nickname || userInfo.username || '用户' }}</span>
            <el-icon style="color: #fff;"><CaretBottom /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToProfile">
                <el-icon><User /></el-icon>
                <span>个人信息</span>
              </el-dropdown-item>
              <el-dropdown-item @click="handleLogout">
                <el-icon><SwitchButton /></el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'" class="aside-menu">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          :collapse="isCollapse"
          background-color="#001529"
          text-color="rgba(255,255,255,0.65)"
          active-text-color="#fff"
          router>
          
          <!-- 动态生成菜单 -->
          <template v-for="menu in menus" :key="menu.path">
            <!-- 没有子菜单的情况 -->
            <el-menu-item v-if="!menu.children || menu.children.length === 0" :index="menu.path">
              <el-icon><component :is="menu.icon || 'Document'" /></el-icon>
              <template #title>{{ menu.title }}</template>
            </el-menu-item>
            
            <!-- 有子菜单的情况 -->
            <el-sub-menu v-else :index="menu.path">
              <template #title>
                <el-icon><component :is="menu.icon || 'Document'" /></el-icon>
                <span>{{ menu.title }}</span>
              </template>
              
              <!-- 递归处理二级菜单 -->
              <template v-for="subMenu in menu.children" :key="subMenu.path">
                <!-- 二级菜单没有子菜单 -->
                <el-menu-item v-if="!subMenu.children || subMenu.children.length === 0" :index="subMenu.path">
                  {{ subMenu.title }}
                </el-menu-item>
                
                <!-- 二级菜单有子菜单 -->
                <el-sub-menu v-else :index="subMenu.path">
                  <template #title>{{ subMenu.title }}</template>
                  
                  <!-- 三级菜单 -->
                  <el-menu-item v-for="childMenu in subMenu.children" :key="childMenu.path" :index="childMenu.path">
                    {{ childMenu.title }}
                  </el-menu-item>
                </el-sub-menu>
              </template>
            </el-sub-menu>
          </template>
          
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  CaretBottom,
  User,
  SwitchButton,
  HomeFilled,
  Document,
  Setting,
  Fold,
  Expand,
  Money
} from '@element-plus/icons-vue'

export default {
  name: 'Home',
  components: {
    CaretBottom,
    User,
    SwitchButton,
    HomeFilled,
    Document,
    Setting,
    Fold,
    Expand,
    Money
  },
  setup() {
    const router = useRouter()
    const isCollapse = ref(false)
    const activeMenu = ref('/welcome')
    const menus = ref([])
    const userInfo = ref({})

    // 获取菜单和用户信息
    onMounted(() => {
      // 从localStorage获取菜单数据
      const menuData = localStorage.getItem('menus')
      if (menuData) {
        menus.value = JSON.parse(menuData)
      } else {
        // 如果没有菜单数据，重定向到登录页
        router.push('/login')
        ElMessage.error('您尚未登录或登录已过期')
      }

      // 从localStorage获取用户信息
      const userInfoData = localStorage.getItem('userInfo')
      if (userInfoData) {
        userInfo.value = JSON.parse(userInfoData)
      }

      // 设置当前活动菜单
      activeMenu.value = router.currentRoute.value.path
    })

    const goToProfile = () => {
      router.push('/account/profile')
    }

    const handleLogout = () => {
      ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除本地存储
        localStorage.clear()
        router.push('/login')
        ElMessage({
          type: 'success',
          message: '已退出登录'
        })
      }).catch(() => {
        // 取消退出
      })
    }

    return {
      isCollapse,
      activeMenu,
      menus,
      userInfo,
      goToProfile,
      handleLogout
    }
  }
};
</script>

<style scoped>
.el-header {
  padding: 0 20px;
  background-color: #409EFF;
  color: white;
  line-height: 60px;
  position: relative;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.menu-fold-icon {
  font-size: 24px;
  cursor: pointer;
  color: white;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-fold-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.menu-fold-icon:active {
  transform: scale(0.95);
}

.aside-menu {
  transition: width 0.3s;
  background-color: #001529;
  overflow: hidden;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.el-menu-vertical {
  border-right: none;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

:deep(.el-menu--collapse) {
  width: 64px;
}

:deep(.el-menu-item), :deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
  transition: all 0.3s;
}

:deep(.el-menu-item.is-active) {
  background-color: #1890ff !important;
  position: relative;
}

:deep(.el-menu-item.is-active::before) {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
}

:deep(.el-menu-item:hover), :deep(.el-sub-menu__title:hover) {
  background-color: #1890ff !important;
  color: #fff !important;
}

:deep(.el-sub-menu.is-active .el-sub-menu__title) {
  color: #fff !important;
}

:deep(.el-menu-item .el-icon), :deep(.el-sub-menu .el-icon) {
  color: inherit;
  font-size: 18px;
  margin-right: 10px;
}

.el-main {
  padding: 20px;
  background-color: #f5f7fa;
}

.el-dropdown-menu {
  padding: 5px 0;
}

.el-dropdown-menu__item {
  display: flex;
  align-items: center;
  padding: 8px 20px;
}

.el-dropdown-menu__item .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.el-dropdown-menu__item span {
  font-size: 14px;
}

:deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
  background-color: #f5f7fa;
  color: #409EFF;
}
</style> 